'use client'

import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import { Heart, MessageCircle, Share2, Bookmark } from 'lucide-react'
import Image from 'next/image'

interface Post {
  id: string
  title: string
  content: string
  images: string[]
  author: {
    name: string
    avatar: string
  }
  likes: number
  comments: number
  tags: string[]
  createdAt: string
}

interface PostCardProps {
  post: Post
  index: number
}

export function PostCard({ post, index }: PostCardProps) {
  const [imageLoaded, setImageLoaded] = useState(false)
  const [liked, setLiked] = useState(false)
  const [saved, setSaved] = useState(false)

  // 图片预加载
  useEffect(() => {
    const img = new Image()
    img.src = post.images[0]
    img.onload = () => setImageLoaded(true)
  }, [post.images])

  const formatTime = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diff = now.getTime() - date.getTime()
    
    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
    if (days > 0) return `${days}天前`
    
    const hours = Math.floor(diff / (1000 * 60 * 60))
    if (hours > 0) return `${hours}小时前`
    
    const minutes = Math.floor(diff / (1000 * 60))
    return `${minutes}分钟前`
  }

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: index * 0.1 }}
      className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden"
    >
      {/* 作者信息 */}
      <div className="p-3 flex items-center space-x-2">
        <Image
          src={post.author.avatar}
          alt={post.author.name}
          width={32}
          height={32}
          className="rounded-full"
        />
        <div className="flex-1">
          <p className="text-sm font-medium">{post.author.name}</p>
          <p className="text-xs text-gray-500">{formatTime(post.createdAt)}</p>
        </div>
      </div>

      {/* 图片 */}
      <div className="relative aspect-[3/4] bg-gray-100">
        {!imageLoaded && (
          <div className="absolute inset-0 bg-gray-200 animate-pulse" />
        )}
        <Image
          src={post.images[0]}
          alt={post.title}
          fill
          className={`object-cover transition-opacity duration-300 ${
            imageLoaded ? 'opacity-100' : 'opacity-0'
          }`}
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          priority={index < 4}
        />
      </div>

      {/* 内容 */}
      <div className="p-3">
        <h3 className="font-medium text-sm line-clamp-2 mb-2">{post.title}</h3>
        <p className="text-xs text-gray-600 line-clamp-2 mb-2">{post.content}</p>
        
        {/* 标签 */}
        <div className="flex flex-wrap gap-1 mb-3">
          {post.tags.map((tag) => (
            <span
              key={tag}
              className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full"
            >
              #{tag}
            </span>
          ))}
        </div>

        {/* 操作按钮 */}
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <button
              onClick={() => setLiked(!liked)}
              className="flex items-center space-x-1 text-gray-600 hover:text-red-500 transition-colors"
            >
              <Heart
                className={`w-4 h-4 ${liked ? 'fill-red-500 text-red-500' : ''}`}
              />
              <span className="text-xs">{post.likes + (liked ? 1 : 0)}</span>
            </button>
            
            <button className="flex items-center space-x-1 text-gray-600 hover:text-blue-500 transition-colors">
              <MessageCircle className="w-4 h-4" />
              <span className="text-xs">{post.comments}</span>
            </button>
            
            <button className="text-gray-600 hover:text-green-500 transition-colors">
              <Share2 className="w-4 h-4" />
            </button>
          </div>
          
          <button
            onClick={() => setSaved(!saved)}
            className="text-gray-600 hover:text-yellow-500 transition-colors"
          >
            <Bookmark
              className={`w-4 h-4 ${saved ? 'fill-yellow-500 text-yellow-500' : ''}`}
            />
          </button>
        </div>
      </div>
    </motion.div>
  )
}
